<template>
<div>
  <el-card class="box-card system-config">
    <div slot="header" class="clearfix">
      <span>系统配置</span>
      <el-button style="float: right;" type="primary" @click="handlerSaveData">保存</el-button>
    </div>
    <el-tabs v-model="tabConfig">
      <el-tab-pane label="基础设置" name="baseConfig">
        <el-descriptions title="安全性设置" class="description" :column="3"  border>
          <el-descriptions-item label-class-name="label" span="3">
            <template slot="label">
              <i class="el-icon-picture"></i>
              验证码
            </template>
            <el-checkbox v-model="config.captchaEnabled">启用</el-checkbox>
          </el-descriptions-item>
        </el-descriptions>
      </el-tab-pane>
      <el-tab-pane label="全局配置" name="globalConfig">
        <el-empty description="暂未开放"></el-empty>
      </el-tab-pane>
    </el-tabs>
  </el-card>
</div>
</template>

<script>
import formUtils from '@/utils/formUtils';
export default {
  name: "systemConfig",
  data(){
    return{
      tabConfig:'baseConfig',
      config:{
        captchaEnabled:false
      }
    }
  },
  mounted() {
    this.$nextTick(()=>{
      this.initForm();
    })
  },
  methods:{
    handlerSaveData(){
      const url='/api/sys/config/sys_config_main/saveSystemConfig'
      let forms = formUtils.convertToModel(this.config);
      this.$post(url,forms).then((res) => {
        if(res.status===1){
          this.$message({
            duration:1000,
            message: res.message,
            type: 'success',
            onClose:()=>{
              //this.$common.closeTag();
            }
          });
        }else{
          this.$message.error(res.message);
        }
      });
    },
    initForm(){
      const url='/api/sys/config/sys_config_main/getSystemConfig'
      this.$fetch(url).then((res) => {
        if(res.status===1){
          formUtils.convertToForm(res.data,this.config);
          console.log(this.config);
        }else{
          this.$message.error(res.message);
        }
      });
    }
  }
}
</script>

<style scoped>
.clearfix{
  text-align: center;
  font-size:20px;
  font-weight: 700;
}
.system-config{
  margin-top:10px;
  min-height: calc(100vh - 100px);
}
.description >>> .el-descriptions--small{
  font-size:14px;
}
.description >>> .label{
  width:250px;
  background-color: #f6f6f6;
  color: #333333;
}
</style>